<template>
	<view class="release">
		<!-- 自定义导航栏 -->
		<u-navbar :autoBack="true" placeholder></u-navbar>

		<view class="wrap-card">
			<!-- 标题输入 -->
			<view class="my-20">
				<view class="text-gray-500 mb-10">帖子标题</view>
				<u-input v-model="title" placeholder="请输入帖子标题" />
			</view>

			<!-- 文本域 -->
			<view class="text-gray-500 my-20">想说点啥</view>
			<u-textarea v-model="textContent" maxlength="100" height="100"
						placeholder="随便说点儿什么吧..." count confirmType="done"></u-textarea>

			<!-- 分类选择 -->
			<view class="my-20">
				<view class="text-gray-500 mb-10">选择分类</view>
				<picker mode="selector" :range="categoryNames" :value="categoryIndex" @change="onCategoryConfirm">
					<view class="picker">
					    当前选择：{{ selectedCategoryName || "请选择分类" }}
					</view>
				</picker>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-handle">
			<view class="ml-auto mr-20">
				<u-button 
					text="保存修改" 
					color="linear-gradient(to right, #dcc20b, #01906c)"
					:customStyle="{width:'150rpx',height:'60rpx'}" 
					@click="submit"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { CategoryApi, PostApi } from '@/api';
export default {
	data() {
		return {
			postId: null,
			title: '', // 帖子标题
			textContent: '',
			categoryIndex: 0, // 当前选中分类索引
			categoryList: [], // 所有分类列表
			categoryNames: [], // 仅包含 name 的数组，供 picker 使用
			selectedCategoryName: '', // 当前选中分类名称
			btnStyle: {
				width: "450rpx",
				height: "75rpx",
				background: "linear-gradient(-45deg,#01906c,#34D399)",
				color: "#FFFFFF",
				fontSize: "30rpx"
			}
		};
	},
	onLoad(options) {
		if (options.postId) {
			this.postId = options.postId;
			this.fetchCategories().then(() => {
				this.getPostDetail(); // 获取帖子详情并填充表单
			});
		}
	},
	methods: {
		async fetchCategories() {
			try {
				const res = await CategoryApi.getCategoriesList();
				if (res.code === 200) {
					this.categoryList = res.data;
					this.categoryNames = res.data.map(c => c.name);
					if (this.categoryNames.length > 0) {
						this.selectedCategoryName = this.categoryNames[0];
					}
				}
			} catch (err) {
				console.error('获取分类失败:', err);
			}
		},

		async getPostDetail() {
			try {
				const res = await PostApi.getPostById(this.postId); // 假设你有这个接口
				const postData = res.data;

				// 回填数据
				this.title = postData.title;
				this.textContent = postData.content;

				// 设置分类
				const categoryIndex = this.categoryNames.findIndex(
					name => name === postData.categoryName
				);
				if (categoryIndex !== -1) {
					this.categoryIndex = categoryIndex;
					this.selectedCategoryName = postData.categoryName;
				}
			} catch (err) {
				uni.showToast({ title: '加载失败', icon: 'none' });
				console.error('获取帖子详情失败:', err);
			}
		},

		onCategoryConfirm(e) {
			this.categoryIndex = e.detail.value;
			this.selectedCategoryName = this.categoryNames[this.categoryIndex];
		},

		async submit() {
			const postData = {
				id: this.postId,
				title: this.title,
				content: this.textContent,
				categoryName: this.selectedCategoryName
			};

			try {
				await PostApi.updatePost(postData); // 调用更新接口
				uni.showToast({ title: '修改成功', icon: 'success' });
				uni.$emit('post-updated', { postId: this.postId });
				setTimeout(() => {
					uni.navigateBack(); // 返回上一页
				}, 1000);
			} catch (err) {
				console.log("修改失败：", err);
				uni.showToast({ title: '修改失败', icon: 'none' });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.release {
	.picker {
		padding: 15px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.bottom-handle {
		border-top: 1px solid $uni-border-color1;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 85rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
	}
}
</style>